<template>
  <div class="filter-container">
    <div class="filter-field flex-1">
      <template v-for="(item) in itemList" :key="item.path">
        <div class="search-item-box m-5px" v-if="item.type === 'isSearchBtn'">
          <el-button
            type="primary"
            icon="Search"
            @click="$emit('pushFilterEnd')"
            >{{ $t('btns.search') }}</el-button
          >
        </div>
        <div
          class="search-item-box m-5px"
          v-else
          :style="{ paddingLeft: item.labelWeidth }"
        >
          <div
            class="label-text"
            :style="{ width: item.labelWeidth }"
            v-if="item.labelText && item.labelText !== ''"
          >
            <span
              v-text="item.labelText"
              :style="{
                textAlign: item.labelAlign,
                textAlignLast: item.labelAlign,
              }"
            ></span
            ><span>:</span>
          </div>
          <KkSearchItemComponent
            :itemObj="item"
            :queryObj="queryObj"
            @change="dataChangeHandler"
            @pushFilterEnd="emit('pushFilterEnd')"
          />
          <!-- 自定义 -->
          <slot :name="item.queryName" v-if="item.type === 'slot'" />
        </div>

        <div v-if="item.noNextDom"></div>
      </template>

      <slot name="otherBtns" />
    </div>
  </div>
</template>
<script setup lang="ts">
import KkSearchItemComponent from "./KkSearchItemComponent.vue";
const emit = defineEmits(["change", "pushFilterEnd"]);
defineProps({
  queryObj: {
    type: Object,
    default() {
      return {};
    },
  },
  itemList: {
    type: Array<any>,
    default() {
      return [];
    },
  },
});

// 多选款数据选择
const dataChangeHandler = (val: any) => {
  emit("change", val);
};
</script>
<style scoped lang="scss">
.search-item-box {
  display: inline-block;
  position: relative;
  min-height: 32px;

  &.search-item-right-box {
    float: right;
  }

  .label-text {
    line-height: 32px;
    position: absolute;
    left: 0;
    top: 0;
    color: #606266;
    font-size: 14px;
    display: flex;
    padding: 0 8px;

    span:nth-child(1) {
      flex: 1;
      // display: inline-block;
      // text-justify: distribute-all-lines;
    }
  }
}
</style>
